import React, { useState, useEffect, useRef } from 'react'
import { Typography, Descriptions, Table, Tag } from 'antd';
import GoBack from "@/components/TheGoBack";
import TheImage from "@/components/TheImage";
import { useLocation } from 'react-router-dom';
import { getStoreGoodsDetails, getPetTagsList } from '@/api/goodsManagement/goodsList.js';
import { Decimal } from 'decimal.js';
const { Paragraph } = Typography;

export default function goodsManagement() {
  const location = useLocation(); //参数以及路由地址
  const goodsId = location.state.id //商品id
  const storeGoodsId = location.state.storeId //店铺id
  const [dataInfo, setDataInfo] = useState([])
  const [dataSource, setDataSource] = useState([])
  const [columns, setColumns] = useState([])
  const [freightTemplate, setFreightTemplate] = useState(null)
  const [productTxt, setProductTxt] = useState(null) // 商品详情
  const [goodsTagOptions, setGoodsTagOptions] = useState([]) //适用宠物数据

  useEffect(() => {
    if (goodsId && storeGoodsId) {
      getData()
    }
    getPetTags()
  }, [])
  // 适用宠物
  const getPetTags = async () => {
    await getPetTagsList({ type: 'goods_tag' }).then(res => {
      if (res.code === 0 && res.data) {
        res.data.map((v) => {
          goodsTagOptions.push({ label: v.name, value: v.dictionariesId })
        })
      }
    })
  }
  //详情接口数据处理
  const getData = async () => {
    await getStoreGoodsDetails({ goodsId, storeGoodsId }).then(res => {
      if (res.code === 0 && res.data) {
        let goodsInfoVo = res.data.nonSelfGoodsInfoDTO
        let skuInfoVo = res.data.nonSelfGoodsSkuDTOList
        //适用宠物
        let defaultTag = []
        let goodsTag = goodsInfoVo.goodsTag !== null ? goodsInfoVo.goodsTag.split(',') : []
        goodsTagOptions.map(v => {
        })
        goodsTagOptions.map((v) => {
          goodsTag.map((g) => {
            if (v.value === g) {
              defaultTag.push(v)
            }
          })
        })
        let goodsShowImages = goodsInfoVo.goodsShowImages.split(',') //商品图
        setDataInfo([
          {
            label: '商品名称',
            children: goodsInfoVo.goodsName,
          },
          {
            label: '适用宠物',
            children: (defaultTag.map((v, i) => {
              return <Tag key={i}>{v.label}</Tag>
            }))
          },
          {
            label: '商品类目',
            children: goodsInfoVo.goodsClassifyName,
          },
          {
            label: '商品图',
            children: <TheImage src={goodsShowImages} />
          },{
            label: '是否为虚拟商品',
            children:  goodsInfoVo.isVirtual?'是':'否'
          },
        ])
        setFreightTemplate(goodsInfoVo.freightTemplateName)//运费模板
        setProductTxt(goodsInfoVo.productTxt) //商品详情
        let column = [] //表格表头处理
        skuInfoVo[0].skuAttribute.forEach((item, index) => {
          column.push({
            title: item.key,
            dataIndex: index,
            key: index,
          })
        });
        column = column.concat([
          {
            title: '划线价（元）',
            dataIndex: 'skuOriginalPrice',
            key: 'skuOriginalPrice',
          },
          {
            title: '日常价（元）',
            dataIndex: 'skuCurrentPrice',
            key: 'skuCurrentPrice',
          },
          {
            title: '库存',
            dataIndex: 'skuStock',
            key: 'skuStock',
          },
          {
            title: '重量（kg）',
            dataIndex: 'skuWeight',
            key: 'skuWeight',
          },
          {
            title: '描述',
            dataIndex: 'skuDescription',
            key: 'skuDescription',
          },
          {
            title: '图片',
            dataIndex: 'imageFile',
            key: 'imageFile',
          },
        ])
        setColumns(column)
        let dataSource = skuInfoVo.map((v, i) => {
          let obj = {};
          v.skuAttribute.forEach((j, k) => {
            obj[k] = j.value;
          });
          obj.skuCurrentPrice = '￥' + Decimal(v.skuCurrentPrice).div(Decimal(100)).toNumber().toFixed(2) //日常价
          obj.skuOriginalPrice = '￥' + Decimal(v.skuOriginalPrice).div(Decimal(100)).toNumber().toFixed(2) //划线价
          obj.skuStock = parseInt(v.skuStock).toLocaleString(); //可用库存
          obj.skuWeight = `${v.skuWeight / 1000}kg`; //重量
          obj.skuDescription = v.skuDescription; //描述
          obj.imageFile = <TheImage src={[v.imageFile]}></TheImage> //图片
          obj.id = i
          return obj;
        });
        setDataSource(dataSource)
      }
    })

  }
  return (
    <div className='wrap-box'>
      <GoBack title={"商品详情"} />
      <div className='wrap-box-content'>
        <Paragraph strong>  <blockquote>基本信息</blockquote> </Paragraph>
        <Descriptions items={dataInfo} column={1} labelStyle={{ marginLeft: 20 }} />
        <Paragraph strong>  <blockquote>运费</blockquote> </Paragraph>
        <Descriptions items={[{ label: '运费模板', children: freightTemplate }]} labelStyle={{ marginLeft: 20 }} />
        <Paragraph strong>  <blockquote>价格库存</blockquote> </Paragraph>
        <Table dataSource={dataSource} columns={columns} bordered rowKey={(r) => r.id} pagination={false} />
        <Paragraph strong>  <blockquote>商品详情</blockquote> </Paragraph>
        <div
          style={{ overflowX: "auto" }}
          dangerouslySetInnerHTML={{ __html: productTxt }}
        />
      </div>
    </div>
  )
}